
<template>
  <div>
    <Form
      :model="formItem"
      class="from-box"
      ref="formValidate"
      :rules="ruleValidate"
    >
      <Form-item class="Form-items" prop="loginName">
        <div class="item-boxs">
          <img src="../../../assets/images/login/phone.png" alt="" />
          <Input
            v-model="formItem.loginName"
            class="input-box"
            placeholder="请输入用户名"
          />
        </div>
      </Form-item>
      <Form-item class="Form-items" prop="code">
        <div class="item-boxs phone-boxs">
          <img src="../../../assets/images/login/yzm.png" alt="" />
          <Input
            v-model="formItem.code"
            class="input-box"
            placeholder="请输入验证码"
          />
          <Button v-show="show" type="primary" @click="getPhone()" class="codebtus">发送验证码</Button>
          <Button v-show="!show" type="primary" class="codebtus">{{count}} s</Button>
        </div>
      </Form-item>

      <Form-item class="Form-items" prop="roleName">
        <div class="footer-box">
          <Button class="footer-btu" @click="closeModel()">返回</Button>
          <Button class="footer-btu" type="primary" @click="confirm" >下一步</Button>
        </div>
      </Form-item>
    </Form>
  </div>
</template>

<script>
import { forgetPWD, sendMSG } from '@/api/system/user.js'
export default {
  components: {},
  data () {
    return {
      formItem: {
        loginName: '',
        code: '',
        phone: ''
      },
      AlarmLevelList: [],
      ruleValidate: {
        loginName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      show: true,
      count: '',
      timer: null
    }
  },
  mounted () {},
  methods: {
    // 获取用户手机号
    getPhone () {
      let that = this
      if (!that.formItem.loginName) {
        that.$refs.formValidate.validateField('loginName')
        return false
      }
      forgetPWD({ loginName: that.formItem.loginName }).then((res) => {
        if (res.status === 200) {
          that.formItem.phone = res.data
          that.sendCode(res.data)
        } else {
          that.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    // 发送验证码
    sendCode (phone) {
      let that = this
      sendMSG({ login: phone }).then((res) => {
        if (res.status === 200) {
          that.$Message.success(`已经向 ${phone} 手机发送验证码`)
          that.getCode()
        } else {
          that.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    getCode () {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    confirm () {
      let that = this
      that.$refs['formValidate'].validate((valid) => {
        if (valid) {
          that.$emit('goNext', this.formItem)
        } else {
          // this.$Message.error('表单验证失败!');
        }
      })
    },
    closeModel () {
      this.$refs['formValidate'].resetFields()
      this.$router.back(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.from-box {
  width: 500px;
  margin: 0 auto;
  .item-boxs {
    height: 58px;
    position: relative;
    .input-box {
      height: 58px;
    }
    img {
      width: 32px;
      height: 32px;
      position: absolute;
      left: 30px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 999;
    }
    /deep/ .ivu-input-inner-container {
      height: 58px;
    }
    /deep/ .ivu-input {
      height: 58px;
      padding-left: 70px;
      font-size: 16px;
    }
    /deep/ .ivu-form-item-content {
      font-size: 16px;
    }
  }
  .footer-box {
    width: 100%;
    display: flex;
    justify-content: space-between !important;
    .footer-btu {
      width: 222px !important;
      height: 54px !important;
      font-size: 18px;
    }
  }
  .Form-items {
    margin-bottom: 30px;
  }
  .phone-boxs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .codebtus {
      height: 100%;
      width: 122px !important;
      font-size: 18px;
    }
  }
}
</style>
